<template>
	<div>
		<div class="left noScroll">
			<NewSection :type="countList.length>2?0:6" imgType="newCar" title="设施概况">
				<div class="left-top">
					<div class="left-top-count">
						<div class="left-top-count-item cursor-pointer" v-for="(item,index) in countList" :key="index"
							@click.stop="onClickGenDetailItem(item.title)">
							<!-- <Icon :custom="'i-icon ' + item.icon" size="36" class="left-top-count-item-icon" /> -->
							<img :src="item.icon" class="left-top-count-img" >
							<!-- <img src="" > -->
							<div class="left-top-count-item-text">
								<div class="left-top-count-item-text-title">
									{{item.title}}
								</div>
								<div class="left-top-count-item-text-count">{{item.count}}</div>
							</div>
						</div>
					</div>
				</div>
			</NewSection>
			<NewSection :type="7" imgType="use" title="使用情况">
				<div slot="right">
					<div class="left-title">
						<div class="left-title-item cursor-pointer" @click.stop="caseClick(0)"
							:class="{'left-title-item-in' : caseIndex == 0}">公厕</div>
						<div class="left-title-item cursor-pointer" @click.stop="caseClick(1)"
							:class="{'left-title-item-in' : caseIndex == 1}">中转站</div>
					</div>
				</div>
				<div class="left-cont noScroll" v-if="caseIndex==0">
					<div class="left-cont-item" v-for="(item,index) in conditionList" :key="index">
						<div class="title">
							<div>{{index+1}}</div>
							<span>{{ item.title }}</span>
						</div>
						<div class="fs-14 flex j-between time left-cont-item-num">
							<div class="left-cont-item-num-txt">开门时间：{{caseIndex == 0 ? '24小时开门' : item.openTime || '- -'}}</div>
							<div>
								<span>{{ item.people || '0' }}</span>
								人次
							</div>
						</div>
						<Progress :percent="getFaclRatio(item)" hide-info :stroke-color="['#2191BD','#00BAFF']" :stroke-width="14" />
					</div>
				</div>
				<div class="left-cont noScroll" v-else>
					<div class="left-cont-item" v-for="(item,index) in temporaryArr" :key="index">
						<div class="title">
							<div>{{index+1}}</div>
							<span>{{ item.title }}</span>
						</div>
						<div class="fs-14 flex j-between time left-cont-item-num">
							<div class="left-cont-item-num-txt">开门时间：{{caseIndex == 0 ? '24小时开门' : item.openTime || '- -'}}</div>
							<div>
								<span>{{ item.people || '0' }}</span>
								人次
							</div>
						</div>
						<Progress :percent="getFaclRatio(item)" hide-info :stroke-color="['#2191BD','#00BAFF']" :stroke-width="14" />
					</div>
				</div>
			</NewSection>
		</div>
		<div class="right noScroll">
			<NewSection :type="8" imgType="text" title="作业资源">
				<div class="right-top">
					<div class="flex">
						<div class="flex-1">
							<div v-if="refresh" style="padding-left: 60px;">
								<Echarts width="120px" height="130px" key="ylld" :options="gcOptions"></Echarts>
							</div>
						</div>
						<div class="flex-1">
							<div v-if="refresh">
								<Echarts width="120px" height="130px" key="ylld" :options="zzzOptions"></Echarts>
							</div>
						</div>
					</div>
					<div class="right-top-sign">
						<div class="right-top-sign-item">
							<div class="right-top-sign-item-icon" style="background:#37bbad"></div>
							正常
						</div>
						<div class="right-top-sign-item">
							<div class="right-top-sign-item-icon" style="background:#e9ab4e"></div>
							维修
						</div>
						<div class="right-top-sign-item">
							<div class="right-top-sign-item-icon" style="background:#4795d7"></div>
							废弃
						</div>
						<div class="right-top-sign-item">
							<div class="right-top-sign-item-icon" style="background:#807cd4"></div>
							暂停
						</div>
						<div class="right-top-sign-item">
							<div class="right-top-sign-item-icon" style="background:#83919b"></div>
							拆除
						</div>
					</div>
					<div class="right-top-line"></div>
					<div class="right-top-msg">
						<div class="right-top-msg-item">
							<div class="right-top-msg-item-icon">
								<Icon custom="i-icon icon-baojieyuan" size="32" class="right-top-msg-item-icon-icon" />
								<!-- <div class="right-top-msg-item-icon-text">
									<div>处理员</div>
									<span>{{workTypeCount.processorNumber || 0}}</span>
								</div> -->
							</div>
							<div class="right-cont-detection-item-data" style="flex: 3;">
								<div>处理员</div>
								<span>{{workTypeCount.processorNumber || 0}}</span>
							</div>
							<div class="right-cont-detection-item-data">
								<div>在线</div>
								<span>{{workTypeCount.processorOnlineNumber || 0}}</span>
							</div>
							<div class="right-cont-detection-item-data">
								<div>离线</div>
								<span>{{workTypeCount.processorOfflineNumber || 0}}</span>
							</div>
							<div class="right-cont-detection-item-data">
								<div>无设备</div>
								<span>{{workTypeCount.processorNoDeviceNumber || 0}}</span>
							</div>
						</div>
						<div class="right-top-line"></div>
						<div class="flex j-end flex-wrap right-top-type">
							<div class="">
								填埋工
								<span>{{workTypeCount.landfillWorkOnlineNumber || 0}}/{{workTypeCount.landfillWorkTotalNumber || 0}}</span>
							</div>
							<div class="">
								清运工
								<span>{{workTypeCount.keepUpWorkOnlineNumber || 0}}/{{workTypeCount.keepUpWorkTotalNumber || 0}}</span>
							</div>
							<div class="">
								公厕管理员
								<span>{{workTypeCount.publicToiletsOnlineNumber || 0}}/{{workTypeCount.publicToiletsTotalNumber || 0}}</span>
							</div>
							<div class="">
								收运工
								<span>{{workTypeCount.collectorWorkOnlineNumber || 0}}/{{workTypeCount.collectorWorkTotalNumber || 0}}</span>
							</div>
							<div class="">
								转运工
								<span>{{workTypeCount.transitWorkersOnlineNumber || 0}}/{{workTypeCount.transitWorkersTotalNumber || 0}}</span>
							</div>
							<div class="">
								转运站管理员
								<span>{{workTypeCount.transferStationOnlineNumber || 0}}/{{workTypeCount.transferStationTotalNumber || 0}}</span>
							</div>
						</div>
						<div class="right-top-line" style="margin-top: 0;"></div>
						<div class="right-top-msg-item">
							<div class="right-top-msg-item-icon">
								<Icon custom="i-icon icon-zhuanyunche1" size="32"
									class="right-top-msg-item-icon-icon" />
								<!-- <div class="right-top-msg-item-icon-text">
									<div>转运车辆</div>
									<span>{{zyzy_zycl_total}}</span>
								</div> -->
							</div>
							<div class="right-cont-detection-item-data" style="flex: 3;">
								<div>转运车辆</div>
								<span>{{zyzy_zycl_total}}</span>
							</div>
							<div class="right-cont-detection-item-data">
								<div>在线</div>
								<span>{{zyzy_zycl_online}}</span>
							</div>
							<div class="right-cont-detection-item-data">
								<div>离线</div>
								<span>{{zyzy_zycl_offline}}</span>
							</div>
							<div class="right-cont-detection-item-data">
								<div>无设备</div>
								<span>{{zyzy_zycl_nodevice}}</span>
							</div>
						</div>
					</div>
				</div>
			</NewSection>
			<NewSection :type="9" imgType="newCar" title="当日异常" rightIcon @onClickRightIcon="onClickException">
				<div class="right-cont">
					<div class="right-cont-area">
						<div class="right-cont-area-item right-cont-area-img1" @click.stop="onClickViolation(0)">
							<div class="right-cont-area-item-title">
								氨气超标
							</div>
							<div class="right-cont-area-item-count">
								{{dryc_aqcb}}
							</div>
						</div>
						<div class="right-cont-area-item right-cont-area-img2" @click.stop="onClickViolation(1)">
							<div class="right-cont-area-item-title">
								硫化氢超标
							</div>
							<div class="right-cont-area-item-count">
								{{dryc_lhqcb}}
							</div>
						</div>
						<div class="right-cont-area-item right-cont-area-img3" @click.stop="onClickViolation(2)">
							<div class="right-cont-area-item-title">
								烟雾超标
							</div>
							<div class="right-cont-area-item-count">
								{{dryc_ywcb}}
							</div>
						</div>
						<div class="right-cont-area-item right-cont-area-img4" @click.stop="onClickViolation(3)">
							<div class="right-cont-area-item-title">
								其他
							</div>
							<div class="right-cont-area-item-count">
								{{dryc_qt}}
							</div>
						</div>
					</div>
				</div>
			</NewSection>
			<!-- <MainSection icon="icon-jiankong11"
                   title="视频监控">
        <div class="right-video"
             style="height: 250px">
          <SocketVideoPlayer dataId="018202014611"
                             channelId="1"
                             key="018202014611-1"
                             style="width:100%;height:100%"></SocketVideoPlayer>
        </div>
      </MainSection> -->
		</div>

		<!-- 右 当日异常 图标点击 -->
		<Modal v-model="exceptionVisible" width="718" :closable="false" footer-hide
			:styles="{right: '200px',top:'106px'}" class="exception-modal">
			<div class="exception">
				<div class="exception-top">
					<div class="exception-top-name">
						异常列表
					</div>
					<img src="../../../../assets/new/new_close.png" class="exception-top-img"
						@click.stop="onClickExceptionClose">
				</div>
				<div class="exception-title">
					<div class="exception-title-left">
						<div class="exception-title-left-tab">
							<div v-for="(item,index) in exceptionArr" :key="index"
								@click.stop="onClickExceptionTabItem(index)"
								:class="{'exception-title-left-tab-in' : currentExceptionTabIndex == index}">
								{{item.name}}
							</div>
						</div>

						<div :class="tbsr_cp > 0 ? 'exception-title-left-once' : 'exception-title-left-more'">
							<div>异常{{ currentExceptionTabIndex == 0 ? '公厕' : currentExceptionTabIndex == 1 ? '中转站' : '井盖' }}数</div>
							<div><span>{{exp_cp}}</span>个</div>
							<div>同比上日<span>{{tbsr_cp}}</span></div>
						</div>

						<div :class="tbsr_count > 0 ? 'exception-title-left-once' : 'exception-title-left-more'">
							<div>异常总次数</div>
							<div><span>{{exp_count}}</span>次</div>
							<div>同比上日<span>{{tbsr_count}}</span></div>
						</div>
					</div>
					<div class="exception-title-right">
						<template v-for="(item, index) in expGroupList">
							<div class="exception-title-right-row" v-if="index < 2" :key="index">
								<div>{{item.expName}}</div>
								<Progress :percent="item.percent" hide-info :stroke-width="5"
									:stroke-color="index == 0 ? ['#C43A3A','#C43A3A'] : ['#00BAFF','#00BAFF']" />
								<div>{{ item.count }}</div>
							</div>
						</template>
					</div>
				</div>
				<div class="exception-type">
					<div class="exception-type-item">
						<span
							class="exception-type-item-title fs-16">{{ currentExceptionTabIndex == 0 ? '公厕' : currentExceptionTabIndex == 1 ? '中转站' : '井盖'  }}类型</span>
						<Select v-model="toiletOrTransferType" clearable style="width: 180px;"
							@on-change="getExceptionList">
							<Option :value="item.id" v-for="item in toiletOrTransferTypeArr" :key='item.id'>
								{{item.name}}</Option>
						</Select>
					</div>
					<div class="exception-type-item">
						<span class="exception-type-item-title fs-16">异常类型</span>
						<Select v-model="exceptionType" clearable style="width: 180px;" @on-change="getExceptionList">
							<Option :value="item.name" v-for="item in exceptionTypeArr" :key='item.id'>{{item.name}}
							</Option>
						</Select>
					</div>
					<div class="exception-type-item" style="margin-right: 0;">
						<span class="exception-type-item-title fs-16">日期</span>
						<DatePicker type="date" :value="date" format="yyyy-MM-dd" placeholder="" :editable="false"
							@on-change="onChangeDate" style="width: 180px;"></DatePicker>
					</div>
				</div>
				<div class="exception-line">
					<img src="../../../../assets/new/new_img_light_line.png">
				</div>
				<div class="exception-cont noScroll">
					<div class="exception-cont-item" v-for="(item,index) in exceptionList" :key="index">
						<div class="cont-title">
							<div class="cont-title-msg">
								<div>{{item.depName}}：</div>
								<div>{{item.name}}[{{item.type}}]</div>
							</div>
							<div class="cont-title-msg cont-title-center">
								<div>{{ item.expName }}：</div>
								<div>{{ item.items ? item.items.length : 0 }}次</div>
							</div>
							<div class="cont-title-msg cont-title-center">
								<div>累积时长：</div>
								<div>{{item.duration}}</div>
							</div>
							<div class="cont-title-btn" @click.stop="onClickExceptionDetail(item)">
								<div>
									{{item.visible ? '收起' : '详情'}}
								</div>
								<Icon custom="i-icon icon-sort-2" size="16" class="cont-title-btn-icon"
									:class="{'cont-title-btn-icon-show' : item.visible}" />
							</div>
						</div>
						<div class="cont-bottom" v-show="item.visible">
							<div class="cont-bottom-item" v-for="(items,indexs) in item.items" :key="indexs">
								<div>{{indexs + 1}}</div>
								<div>{{items.createTime}}</div>
								<div>{{items.content}}</div>
								<div class="flex a-center j-end cursor-pointer"
									@click.stop="onClickExceptionItems(item,items)"
									:style="{color: items.dealType ? '#00BAFF' : ''}">
									{{items.dealType ? items.dealType : '待处理'}}
									<Icon custom="i-icon icon-youjiantou" size="16" class="cursor-pointer" style="color: rgba(255,255,255,.65);"/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Modal>

		<!-- 处理 -->
		<NewAlarmDealModal v-model="violationAlarmDealVisible" :dataId.sync="violationAlarmDealId"
			:type="violationAlarmDealType" @onClickConfirm="getExceptionList"></NewAlarmDealModal>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	import MainSection from '../template/MainSection'
	import Echarts from '../../../common/Echarts';
	import SocketVideoPlayer from '@/components/common/SocketVideoPlayer';
	import HttpVideoPlayer from '@/components/common/HttpVideoPlayer';
	import NewSection from '../subject/NewSection'
	import {
		getToday
	} from '@/utils/dateRangUtil'
	import NewAlarmDealModal from '@/components/product/main/new/NewAlarmDealModal'
	export default {
		components: {
			MainSection,
			NewSection,
			Echarts,
			HttpVideoPlayer,
			SocketVideoPlayer,
			NewAlarmDealModal
		},
		data() {
			return {
				refresh: true,
				dryc_aqcb: 0,
				dryc_lhqcb: 0,
				dryc_ywcb: 0,
				dryc_qt: 0,
				countList: [{
					icon: require('../../../../assets/new/monitor_1.png'),
					title: '公厕',
					count: 0
				}, {
					icon: require('../../../../assets/new/monitor_2.png'),
					title: '中转站',
					count: 0
				}, {
					icon: require('../../../../assets/new/monitor_3.png'),
					title: '窨井盖',
					count: 0
				}],
				jinggai:require('../../../../assets/new/monitor_3.png'),
				zyzy_zycl_total: 0,
				zyzy_zycl_online: 0,
				zyzy_zycl_offline: 0,
				zyzy_zycl_nodevice: 0,
				zyzy_bjy_total: 0,
				zyzy_bjy_online: 0,
				workTypeCount: {},
				caseIndex: 0,
				conditionList: [],
				maxPeopleCount: '',
				gcOptions: {
					legend: {
						show: false
					},
					graphic: [{ //环形图中间添加文字
						type: 'text', //通过不同top值可以设置上下显示
						left: 'center',
						top: '45%',
						style: {
							text: '公厕',
							textAlign: 'center',
							fill: '#fff', //文字的颜色
							width: 30,
							height: 30,
							fontSize: 12
						}
					}],
					color: ['#37bbad', '#e9ab4e', '#4795d7', '#807cd4', '#83919b'],
					series: [{
						type: 'pie',
						radius: ['60%', '80%'],
						label: {
							show: false,
							position: 'center'
						},
						data: [{
								value: 0,
								name: '正常'
							},
							{
								value: 0,
								name: '维修'
							},
							{
								value: 0,
								name: '废弃'
							},
							{
								value: 0,
								name: '暂停'
							},
							{
								value: 0,
								name: '拆除'
							}
						]
					}]
				},
				zzzOptions: {
					legend: {
						show: false
					},
					graphic: [{ //环形图中间添加文字
						type: 'text', //通过不同top值可以设置上下显示
						left: 'center',
						top: '45%',
						style: {
							text: '中转站',
							textAlign: 'center',
							fill: '#fff', //文字的颜色
							width: 30,
							height: 30,
							fontSize: 12
						}
					}],
					color: ['#37bbad', '#e9ab4e', '#4795d7', '#807cd4', '#83919b'],
					series: [{
						type: 'pie',
						radius: ['60%', '80%'],
						label: {
							show: false,
							position: 'center'
						},
						data: [{
								value: 0,
								name: '正常'
							},
							{
								value: 0,
								name: '维修'
							},
							{
								value: 0,
								name: '废弃'
							},
							{
								value: 0,
								name: '暂停'
							},
							{
								value: 0,
								name: '拆除'
							}
						]
					}]
				},
				// 当日异常弹框
				exceptionArr: [], // 公厕 中转站 为了查询时传id
				toiletTypeArr: [], // 公厕类型
				transferTypeArr: [], // 中转站类型
				ManholeTypeArr: [], // 中转站类型
				exp_cp: 0,
				tbsr_cp: 0,
				exp_count: 0,
				tbsr_count: 0,
				expGroupList: [],
				exceptionVisible: false,
				date: '',
				toiletOrTransferType: '',
				toiletOrTransferTypeArr: [],
				exceptionType: '',
				exceptionTypeArr: [],
				toiletExceptionTypeArr: [], // 公厕异常类型
				transferExceptionTypeArr: [], // 中转站异常类型
				ManholeExceptionTypeArr: [], // 窨井盖异常类型
				exceptionList: [],
				currentExceptionTabIndex: 0,
				// 处理
				violationAlarmDealVisible: false,
				violationAlarmDealId: '',
				violationAlarmDealType: '',
				temporaryArr:[]
			};
		},
		watch: {
			exceptionVisible(newVal) {
				if (!newVal) {
					this.date = getToday();
				}
			}
		},
		mounted() {
			this.init()
		},
		created() {
			this.initDate();
		},
		methods: {
			initDate() {
				this.$http.getToiletNumMap({}).then((res) => {
					if (res.code === 200) {
						let data = res.result;
						for (let i = 0; i < this.countList.length; i++) {
							for (let j = 0; j < data.length; j++) {
								if (data[j].type == this.countList[i].title) {
									this.countList[i].count = data[j].num;
								}
							}
						}
						// for (let j = 0; j < data.length; j++) {
						// 	if (data[j].type == '窨井盖') {
						// 		this.countList.push({
						// 			icon: this.jinggai,
						// 			title: '窨井盖',
						// 			count: data[j].num
						// 		})
						// 	}
						// }
					}
				})
				// 处理员数量
				this.$http.getMapWorkTypeCount().then((res) => {
					if (res.code === 200) {
						this.workTypeCount = res.result
					}
				})

				// 转运车数量
				this.$http.getMapCarTypeCount().then((res) => {
					let data = res.result
					if (res.code === 200) {
						this.zyzy_zycl_total = data.transportTruckNumber
						this.zyzy_zycl_online = data.transportTruckOnlineNumber
						this.zyzy_zycl_offline = data.transportTruckOfflineNumber
						this.zyzy_zycl_nodevice = data.transportTruckNoDeviceNumber
					}
				})


				this.$http.getFaclAlarmNum({}).then((res) => {
					if (res.code === 200) {
						let data = res.result;
						this.dryc_aqcb = data.aq;
						this.dryc_lhqcb = data.lhq;
						this.dryc_ywcb = data.yw;
						this.dryc_qt = data.other;
					}
				})

				this.$http.getToiletStatusNumMap({}).then((res) => {
					if (res.code === 200) {
						let data = res.result;
						for (let i = 0; i < data.length; i++) {
							if (data[i].type == "公厕") {
								for (let j = 0; j < this.gcOptions.series[0].data.length; j++) {
									if (this.gcOptions.series[0].data[j].name == data[i].STATUS) {
										this.gcOptions.series[0].data[j].value = data[i].num;
									}
								}
							} else if (data[i].type == "中转站") {
								for (let j = 0; j < this.zzzOptions.series[0].data.length; j++) {
									if (this.zzzOptions.series[0].data[j].name == data[i].STATUS) {
										this.zzzOptions.series[0].data[j].value = data[i].num;
									}
								}
							}
						}
						this.refresh = false;
						this.$nextTick(() => {
							this.refresh = true;
						})
					}
				})

				this.gtsnm(this.caseIndex == 0 ? "公厕" : "中转站");
			},
			init() {
				this.getToiletOrTransferType()
				this.date = getToday();
			},
			// 关闭异常列表
			onClickExceptionClose() {
				this.exceptionVisible = false
			},
			caseClick(i) {
				this.caseIndex = i;
				// console.log(this.caseIndex)
				this.gtsnm(i == 0 ? "公厕" : "中转站");
			},
			gtsnm(type) {
				this.$http.getToiletDetailMap({
					"type": type
				}).then((res) => {
					if (res.code === 200) {
						let data = res.result
						if(type == '公厕'){
							this.conditionList = data
						}else{
							this.temporaryArr = data
						}
						this.maxPeopleCount = data[0].people
						this.$forceUpdate()
					}
				})
			},
			// 计算 公厕 中转站百分比，第一个一直是百分之百，将第一个的人次作为分母
			getFaclRatio(item) {
				if (this.maxPeopleCount > 0) {
					return parseInt(item.people / this.maxPeopleCount * 100)
				} else {
					return 0
				}
			},
			// 获取公厕与中转站类型
			getToiletOrTransferType() {
				let arr = [{
					id: 0,
					name: '全部'
				}]
				this.$http.getFacilityBigTypeAllList({
					type: 'facl'
				}).then(res => {
					// console.log(res)
					if (res.code === 200) {
						let toiltIndex = res.result.findIndex(item => {
							return item.name == '公厕'
						})
						// 公厕大类
						this.exceptionArr[0] = {
							id: res.result[toiltIndex].id,
							name: res.result[toiltIndex].name,
						}
						// 公厕小类
						this.$http.getFacilitySmallTypeAllList({
							facilitietypeid: res.result[toiltIndex].id
						}).then(ress => {
							if (ress.code === 200) {
								this.toiletTypeArr = arr.concat(ress.result)
							}
						})
						// 公厕异常类型
						let toiletParams = {
							page: 1,
							size: 99999,
							thresholdtype: 'facl',
							faclitypeid: res.result[toiltIndex].id
						}
						this.$http.getAlarmList(toiletParams).then(ress => {
							if (ress.code === 200) {
								let data = ress.result.thresholdlist.map(item => {
									item.name = item.sysname
									return item
								})
								this.toiletExceptionTypeArr = arr.concat(data)
							}
						})

						let transferIndex = res.result.findIndex(item => {
							return item.name == '中转站'
						})
						// 中转站大类
						this.exceptionArr[1] = {
							id: res.result[transferIndex].id,
							name: res.result[transferIndex].name,
						}
						// 中转站小类
						this.$http.getFacilitySmallTypeAllList({
							facilitietypeid: res.result[transferIndex].id
						}).then(ress => {
							if (ress.code === 200) {
								this.transferTypeArr = arr.concat(ress.result)
							}
						})
						// 中转站异常类型
						let transferParams = {
							page: 1,
							size: 99999,
							thresholdtype: 'facl',
							faclitypeid: res.result[transferIndex].id
						}
						this.$http.getAlarmList(transferParams).then(ress => {
							if (ress.code === 200) {
								// console.log(ress)
								let data = ress.result.thresholdlist.map(item => {
									item.name = item.sysname
									return item
								})
								this.transferExceptionTypeArr = arr.concat(data)
							}
						})
						
						let ManholeIndex = res.result.findIndex(item => {
							return item.name == '窨井盖'
						})
						// 窨井盖大类
						this.exceptionArr[2] = {
							id: res.result[ManholeIndex].id,
							name: res.result[ManholeIndex].name,
						}
						// 窨井盖小类
						this.$http.getFacilitySmallTypeAllList({
							facilitietypeid: res.result[ManholeIndex].id
						}).then(ress => {
							if (ress.code === 200) {
								this.ManholeTypeArr = arr.concat(ress.result)
							}
						})
						// 窨井盖异常类型
						let ManholeParams = {
							page: 1,
							size: 99999,
							thresholdtype: 'facl',
							faclitypeid: res.result[ManholeIndex].id
						}
						this.$http.getAlarmList(ManholeParams).then(ress => {
							// console.log(ress)
							if (ress.code === 200) {
								let data = ress.result.thresholdlist.map(item => {
									item.name = item.sysname
									return item
								})
								this.ManholeExceptionTypeArr = arr.concat(data)
							}
						})
					}
				})
			},
			// 当日异常图标点击
			onClickException() {
				this.onClickExceptionTabItem(0);
				this.exceptionVisible = true
			},
			// 异常列表 标题中的切换
			onClickExceptionTabItem(index) {
				this.exceptionType = '';
				this.toiletOrTransferType = '';
				this.currentExceptionTabIndex = index
				// 公厕
				if (this.currentExceptionTabIndex === 0) {
					this.toiletOrTransferTypeArr = this.toiletTypeArr
					this.exceptionTypeArr = this.toiletExceptionTypeArr
				} else if(this.currentExceptionTabIndex === 1) {
					this.toiletOrTransferTypeArr = this.transferTypeArr
					this.exceptionTypeArr = this.transferExceptionTypeArr
				}else{
					this.toiletOrTransferTypeArr = this.ManholeTypeArr
					this.exceptionTypeArr = this.ManholeExceptionTypeArr
				}
				// console.log(this.toiletOrTransferTypeArr,this.exceptionTypeArr)
				this.getExceptionList()
			},
			// 修改异常时间
			onChangeDate(date) {
				this.date = date;
				this.getExceptionList();
			},
			getExceptionList() {
				if (this.currentExceptionTabIndex === 0) { // 公厕
					this.$http.getMapFacilTodayException({
						date: this.date,
						expName: this.exceptionType ? this.exceptionType == '全部' ? '' : this.exceptionType : '',
						typeId: this.toiletOrTransferType || '',
						maxTypeId: this.exceptionArr[0].id
					}).then(res => {
						if (res.code === 200) {
							let data = res.result;
							this.exp_cp = data.expCp;
							this.tbsr_cp = data.tbsrCp;
							this.exp_count = data.expCount;
							this.tbsr_count = data.tbsrCount;
							this.expGroupList = data.groupList;
							this.exceptionList = data.exp.map(item => {
								item.visible = false
								return item
							})
							// console.log(this.exceptionList);
						}
					})
				} else if(this.currentExceptionTabIndex === 1) { // 中转站
					this.$http.getMapFacilTodayException({
						date: this.date,
						expName: this.exceptionType ? this.exceptionType == '全部' ? '' : this.exceptionType : '',
						typeId: this.toiletOrTransferType || '',
						maxTypeId: this.exceptionArr[1].id
					}).then(res => {
						if (res.code === 200) {
							let data = res.result;
							this.exp_cp = data.expCp;
							this.tbsr_cp = data.tbsrCp;
							this.exp_count = data.expCount;
							this.tbsr_count = data.tbsrCount;
							this.expGroupList = data.groupList;
							this.exceptionList = data.exp.map(item => {
								item.visible = false
								return item
							})
						}
					})
				} else { //窨井盖
					this.$http.getMapFacilTodayException({
						date: this.date,
						expName: this.exceptionType ? this.exceptionType == '全部' ? '' : this.exceptionType : '',
						typeId: this.toiletOrTransferType || '',
						maxTypeId: this.exceptionArr[2].id
					}).then(res => {
						if (res.code === 200) {
							let data = res.result;
							this.exp_cp = data.expCp;
							this.tbsr_cp = data.tbsrCp;
							this.exp_count = data.expCount;
							this.tbsr_count = data.tbsrCount;
							this.expGroupList = data.groupList;
							this.exceptionList = data.exp.map(item => {
								item.visible = false
								return item
							})
						}
					})
				}
			},
			// 异常列表 列表中详情信息的显隐
			onClickExceptionDetail(item) {
				item.visible = !item.visible
			},
			// 点击异常列表items右箭头
			onClickExceptionItems(item, items) {
				this.violationAlarmDealVisible = true
				this.violationAlarmDealId = items.itemId
				this.violationAlarmDealType = 'facilityAlarm'
			},
			// 异常报警跳转
			onClickViolation() {
				// this.$router.push({
				//   name: 'runAlarm',
				//   params: {
				//     id: '',
				//     author: '',
				//     authorId: '',
				//     authorType: 'facl',
				//     type: '',
				//     typeId: ''
				//   }
				// })
			},
			onClickGenDetailItem(title, type) {
        // bus.$emit('hideSearch')
        bus.$emit('hideMapInfoWindow')
        bus.$emit('hideNavbar')
				bus.$emit('onSearchMenuType', {
					title,
					type
				})
			},
		},
	}
</script>

<style lang='scss' scoped>
	@import "@/scss/iviewCssReset/progress";
	@import "@/scss/iviewCssReset/select";
	@import "@/scss/iviewCssReset/datePicker";
	@import "@/scss/iviewCssReset/modal";

	.left {
		width: 400px;
		position: fixed;
		top: 80px;
		bottom: 0;
		left: 0;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.left-top {
			color: #ffffff;

			.left-top-count {
				font-size: 16px;
				color: #CCCCCC;
				font-weight: 500;
				line-height: 1;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				margin-bottom: 12px;
				padding: 0 50px;

				.left-top-count-item {
					width: 50%;
					display: flex;
					align-items: center;
					margin-top: 18px;
					.left-top-count-img{
						width: 60px;
						height: 60px;
						margin-right: 16px;
					}

					.left-top-count-item-icon {
						width: 60px;
						height: 60px;
						color: #FFFFFF;
						border: 3px solid rgba(255, 255, 255, 0.2);
						border-radius: 50%;
						margin-right: 16px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.left-top-count-item-text {
						height: 60px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						.left-top-count-item-text-title {
							font-size: 16px;
							color: rgba(255, 255, 255, 0.65);
							display: flex;
							align-items: center;
						}

						.left-top-count-item-text-count {
							color: #FFFFFF;
							font-weight: bold;
						}
					}
				}

				.left-top-count-item:last-child {
					margin-right: 0;
				}
			}
		}

		.left-title {
			height: 54px;
			display: flex;
			align-items: center;
			color: #ffffff;
			margin: 37px 37px 0 0;

			.left-title-item {
				margin-left: 20px;
				font-size: 16px;
				font-weight: bold;
				border-bottom: 2px solid transparent;
			}

			.left-title-item-in {
				color: rgba(0,186,255,.9);
				border-color: rgba(0,186,255,.9);
			}
		}

		.left-cont {
			overflow: auto;
			height: 420px;
			box-sizing: border-box;
			padding: 0 32px;
			margin-top: 20px;

			.left-cont-item {
				color: #eee;
				margin-bottom: 20px;

				.title {
					font-size: 16px;
					color: #fff;
					font-weight: bold;
					line-height: 1;
					margin-bottom: 10px;
					display: flex;
					align-items: center;

					div {
						width: 28px;
						height: 28px;
						border-radius: 50%;
						border: 1px solid #CCCCCC;
						margin-right: 10px;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					span {
						/* cursor: pointer; */
					}
				}
				.left-cont-item-num{
					font-size: 14px;
					color: #FFFFFF;
					font-weight: bold;
					line-height: 1;
					opacity: .8;
					margin: 14px 0 6px;
					.left-cont-item-num-txt{
						display: flex;
						align-items: flex-end;
					}
					
					span {
						color: #13A3DD;
						font-weight: bold;
						font-size: 18px;
					}
				}
			}
		}
	}

	.right {
		position: fixed;
		top: 80px;
		bottom: 0;
		right: 8px;
		z-index: 500;
		transition: all 0.2s;
		overflow: auto;

		.right-top {
			color: #ffffff;

			.right-top-sign {
				line-height: 1;
				display: flex;
				align-items: center;
				justify-content: space-around;
				padding: 0 36px;

				.right-top-sign-item {
					display: flex;
					align-items: center;

					.right-top-sign-item-icon {
						width: 8px;
						height: 8px;
						margin-right: 10px;
					}
				}
			}

			.right-top-line {
				width: 282px;
				height: 2px;
				margin: 20px auto;
				background: url(../../../../assets/new/new_img_line.png);
				background-size: 100% 100%;
			}

			.right-top-msg {
				font-size: 16px;
				.right-top-msg-item {
					display: flex;
					align-items: center;
					margin-top: 20px;
					padding: 0 38px;

					.right-top-msg-item-icon {
						display: flex;

						.right-top-msg-item-icon-icon {
							width: 52px;
							height: 52px;
							line-height: 52px;
							text-align: center;
							border-radius: 50%;
							border: 2px solid rgba(255, 255, 255, 0.8);
							margin-right: 16px;
						}

						.right-top-msg-item-icon-text {
							div {
								font-size: 16px;
							}

							span {
								color: rgba(255,255,255,.8);
								font-size: 14px;
								font-weight: bold;
							}
						}
					}

					.right-cont-detection-item-line {
						height: 32px;
						width: 1px;
						background: rgba(255, 255, 255, 0.1);
						margin: 0 20px;
					}

					.right-cont-detection-item-data {
						flex: 2;
						div {
							font-size: 16px;
						}

						span {
							color: rgba(255,255,255,.8);
							font-size: 14px;
							font-weight: bold;
						}
					}

					.right-cont-detection-item-data:last-child {
						margin-right: 0;
					}
				}

				.right-top-type {
					font-size: 16px;
					color: #FFFFFF;
					font-weight: 500;
					line-height: 1;
					padding: 0 38px;
					div {
						width: 50%;
						margin-bottom: 20px;

						span {
							color: #00BAFF;
							margin-left: 5px;
							font-style: 16px;
						}
					}
				}
			}
		}

		.right-cont {
			.right-cont-area {
				/* display: flex; */
				/* justify-content: space-between; */
				font-size: 14px;
				color: #FFFFFF;
				font-weight: 500;
				padding: 20px 30px 0;

				.right-cont-area-item {
					display: inline-block;
					width: 134px;
					height: 60px;
					padding-left: 16px;
					margin-right: 34px;
					margin-bottom: 20px;
					/* background-image: url(../../../../assets/new/new_); */
					position: relative;

					.right-cont-area-item-title {
						padding: 10px 0 0;
						color: rgba(255, 255, 255, 0.65);
					}

					.right-cont-area-item-count {
						font-size: 20px;
						font-weight: bold;
						color: #00BAFF;

						span {
							margin-left: 5px;
						}
					}

					.right-cont-area-item-icon {
						position: absolute;
						bottom: 4px;
						right: 14px;
						color: rgba(241, 145, 73, 0.3);
					}
				}
				.right-cont-area-img1{
					background-image: url(../../../../assets/new/new_nh3.png);
					background-size: 100% 100%;
				}
				.right-cont-area-img2{
					background-image: url(../../../../assets/new/new_h2s.png);
					background-size: 100% 100%;
				}
				.right-cont-area-img3{
					background-image: url(../../../../assets/new/new_yw.png);
					background-size: 100% 100%;
				}
				.right-cont-area-img4{
					background-image: url(../../../../assets/new/new_qt.png);
					background-size: 100% 100%;
				}

				.right-cont-area-item:nth-child(even) {
					margin-right: 0;
				}
			}
		}
	}

	/* 当日异常 */
	.exception-modal {
		::v-deep {
			.ivu-modal-body {
				padding: 0;
			}
		}
	}
	
	.exception {
		width: 1107px;
		height: 732px;
		background: url(../../../../assets/new/new_model_732.png) 0 0 no-repeat;
		background-size: 100% 100%;
		padding: 75px;
	
		.exception-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.exception-top-name {
				font-size: 20px;
				color: #00BAFF;
				font-weight: bold;
			}
	
			.exception-top-img {
				width: 38px;
				height: 38px;
				cursor: pointer;
			}
		}
	
		.exception-title {
			display: flex;
			align-items: center;
	
			.exception-title-left {
				display: flex;
	
				/* margin-right: 40px; */
				.exception-title-left-tab {
					display: flex;
					flex-direction: column;
					justify-content: center;
					margin: 0 40px 0 0;
	
					div {
						width: 60px;
						height: 32px;
						font-size: 16px;
						color: #FFFFFF;
						border: 1px solid #FFFFFF;
						border-radius: 4px;
						text-align: center;
						line-height: 32px;
						font-weight: bold;
						cursor: pointer;
					}
					
					div:nth-child(2){
						margin: 10px 0;
					}
	
					.exception-title-left-tab-in {
						color: #fff;
						background-color: #00BAFF;
						border: 1px solid #00BAFF;
					}
				}
	
				.exception-title-left-once,
				.exception-title-left-more {
					color: #FFFFFF;
					width: 230px;
					height: 130px;
					line-height: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
	
					div:nth-child(1) {
						font-size: 16px;
						font-weight: 500;
						/* margin-top: 15px; */
					}
	
					div:nth-child(2) {
						margin: 20px 0;
	
						span {
							font-size: 20px;
							font-weight: 500;
							color: #eee;
							margin-right: 6px;
						}
					}
	
					div:nth-child(3) {
						font-size: 16px;
						line-height: 1;
	
						span {
							color: #00BAFF;
							margin-left: 10px;
						}
					}
				}
	
				.exception-title-left-more {
					div:nth-child(3) {
						span {
							color: #00BAFF;
						}
					}
				}
			}
	
			.exception-title-right {
				flex: 1;
				margin: 0 20px 0 -30px;
	
				.exception-title-right-row {
					font-size: 16px;
					display: flex;
					align-items: center;
					color: #FFFFFF;
	
					div:nth-child(1) {
						min-width: 70px;
						text-align: right;
						margin-right: 10px;
					}
	
					div:nth-child(3) {
						margin-left: 10px;
					}
				}
	
				.exception-title-right-row:nth-child(1) {
					margin-bottom: 28px;
				}
			}
		}
	
		.exception-type {
			display: flex;
			align-items: center;
			height: 42px;
	
			.exception-type-item {
				display: flex;
				align-items: center;
				margin-right: 50px;
	
				.exception-type-item-title {
					color: #FFFFFF;
					margin-right: 20px;
				}
	
			}
		}
	
		.exception-line {
			text-align: center;
	
			img {
				width: 960px;
				height: 25px;
				display: block;
			}
		}
	
		.exception-cont {
			width: 100%;
			height: 365px;
			overflow: auto;
	
			.exception-cont-item {
				width: 930px;
				min-height: 56px;
				line-height: 1;
				background: url(../../../../assets/new/new_screen_bgc.png) 0 0 no-repeat;
				background-size: 100% 100%;
				margin-bottom: 5px;
	
				.cont-title {
					width: 930px;
					height: 56px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 20px;
					color: rgba(255, 255, 255, 0.45);
	
					.cont-title-msg {
						flex: 2;
						font-size: 16px;
						color: #FFFFFF;
						font-weight: bold;
						display: flex;
						align-items: center;
	
						div:nth-child(1) {
							font-size: 16px;
						}
					}
	
					.cont-title-center {
						flex: 1;
						text-align: center;
					}
	
					.cont-title-btn {
						font-size: 16px;
						color: #FFFFFF;
						font-weight: bold;
						cursor: pointer;
						display: flex;
						align-items: center;
					}
	
					.cont-title-btn-icon {
						color: rgba(255, 255, 255, .65);
						transition: 0.2s;
					}
	
					.cont-title-btn-icon-show {
						transform: rotate(180deg);
					}
				}
	
				.cont-bottom {
					border-top: 1px solid rgba(0, 186, 255, .3);
					padding: 16px 0 22px 32px;
	
					.cont-bottom-item {
						display: flex;
						align-items: center;
						justify-content: space-around;
						margin-bottom: 16px;
						font-size: 16px;
						color: rgba(255, 255, 255, 1);
	
						div:nth-child(1) {
							width: 10%;
						}
	
						div:nth-child(2) {
							text-align: center;
						}
	
						div:nth-child(3) {
							width: 45%;
							text-align: center;
						}
	
						div:nth-child(4) {
							width: 10%;
						}
					}
	
					.cont-bottom-item:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
	::v-deep{
		.exception {
			.ivu-progress {
				width: 310px;
		
				.ivu-progress-inner {
					border: 1px solid rgba(255, 255, 255, .5);
				}
			}
		}
		
		.ivu-progress-inner {
			border: 1px solid rgba(0, 186, 255, .5);
			padding: 0;
		}
		
		
		.ivu-date-picker-rel {
			.ivu-input {
				font-size: 14px;
				color: #FFFFFF;
				background-color: rgba(255, 255, 255, .35);
				border: 0;
			}
		}
	}
	::v-deep {
	
		/* 对话框 */
		.ivu-modal-content {
			background-color: #2c3237;
	
			.ivu-modal-header {
				background-color: #525a60;
			}
	
			.ivu-modal-body {
				// padding: 0;
			}
		}
	
		.ivu-modal-content {
			background-color: rgba(0, 0, 0, 0);
			box-shadow: 0 0 5px 0 rgba(37,187,150,0);
		}
	
		.ivu-select-selection {
			font-size: 14px;
			color: #FFFFFF;
			background-color: rgba(255, 255, 255, .35);
	
			.ivu-icon {
				color: #FFFFFF;
			}
		}
	
		.ivu-select-dropdown {
			background: #333333;
		}
	
		.ivu-date-picker-rel {
			.ivu-icon {
				color: #FFFFFF;
			}
		}
	
		.exception-title-right-row {
			.ivu-progress-outer {
				.ivu-progress-inner {
					padding: 3px 2px;
				}
			}
		}
	
		.ivu-date-picker-cells-cell-selected {
			em {
				background: #00BAFF !important;
			}
		}
	
		.ivu-date-picker-cells-cell-selected:hover {
			em {
				background: #00BAFF !important;
			}
		}
	
		.ivu-date-picker-cells-focused {
			em {
				box-shadow: 0 0 0 1px #00BAFF inset;
			}
		}
	
		.ivu-date-picker-cells-cell-today {
			em:after {
				background: #00BAFF !important;
			}
		}
	
	}
	
	::v-deep {
		.ivu-poptip-inner {
			background-color: rgba(25, 34, 41, 0.85);
		}
	
		.ivu-collapse-simple {
			.ivu-collapse-item-active {
				.ivu-collapse-header {
					background: #213331;
					border-color: #245a4c;
				}
			}
	
			.ivu-collapse-header {
				height: 80px;
				display: flex;
				align-items: center;
				border: 1px solid transparent;
				padding: 16px;
	
				.ivu-icon-ios-arrow-forward {
					order: 1;
					margin-right: 0;
				}
			}
		}
		/* .ivu-progress-bg{
			width: 100% !important;
		} */
	}
</style>
